<template>
  <div class="FormTable">
    <div class="color-3 fs-20 bold mb-20">{{ $route.meta.title }}</div>
    <el-card>
      <div class="form">
        <el-form inline :model="form">
          <slot name="form"></slot>
        </el-form>
      </div>
      <div class="table">
        <el-table ref="table" :data="table" @row-click="row" @selection-change="selection" v-loading="loading">
          <slot name="table"> </slot>
        </el-table>
      </div>
      <slot name="footer"></slot>
      <div class="pagination mt-20 flex jc-end">
        <el-pagination
          background
          class="flex ai-center"
          @size-change="current($event, 'PageSize')"
          @current-change="current($event, 'PageIndex')"
          :current-page="form.PageIndex"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="form.PageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="form.PageCount"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  props: {
    form: Object,
    table: Array,
    loading: Boolean,
  },
  methods: {
    current(value, Page) {
      this.$emit("current", { value, Page });
    },
    selection(val) {
      this.$emit("selection", val);
    },
    row(val) {
      this.$emit("row", val);
    },
  },
};
</script>
<style lang="less">
// .FormTable{

// }
</style>
